import { Message, Button } from '../../components';

export default function MessageView() {

  const [
    messageOpen,
    messageSuccess,
    messageWarning,
    messageError,
    messageInfo,
    messageLoading,
  ] = [
    "open",
    "success",
    "warning",
    "error",
    "info" ,
    "loading" ,
  ].map((type)=>{
    return ()=>{
      if(type==="open"){
        Message.open({
          type:type as any,
          content:`This is a message by Message.${type}`
        });
      }else{
        Message[type](`This is a message by Message.${type}`)
      }
    }
  });

  const destoryAll = () => {
    Message.destroy();
  }

  return (
    <div>
      <Button type="primary" onClick={messageOpen}>
        Display message.open
      </Button>
      <Button type="primary" onClick={messageSuccess}>
        Display message.success  
      </Button>
      <Button type="primary" onClick={messageWarning}>
        Display message.warning
      </Button>
      <Button type="primary" onClick={messageError}>
        Display message.error  
      </Button>
      <Button type="primary" onClick={messageInfo}>
        Display message.info
      </Button>
      <Button type="primary" onClick={messageLoading}>
        Display message.loading
      </Button>
      <Button type="primary" onClick={destoryAll}>
        destoryAllMessage
      </Button>
    </div>
  );
}
